import { useMemo, useState } from "react"

type SelectOptionItem = {
  label: string,
  value: number | string
}

const selectOption: SelectOptionItem[] = [
  {
    label: '今日',
    value: 1
  },
  {
    label: '本周',
    value: 2
  },
  {
    label: '本月',
    value: 3
  },
]



const useGetData = () => {

  const [selectVal, setSelectVal] = useState<SelectOptionItem['value']>(1)


  const SelectNode = useMemo(() => {
    return <div className="h-[32px] flex items-center gap-[16px] pointer-events-auto">
      {
        selectOption.map((item, index) => {
          return <div
            onClick={() => {
              setSelectVal(item.value)
            }}
            key={index}
            className={`cursor-pointer w-[66px] h-full text-center bg-gradient-to-r from-[rgba(24,144,255,0.18)] to-[rgba(24,144,255,0.2)] leading-[32px] ${selectVal==item.value?'bg-[url(@/assets/svg/perception-btn-active.svg)] bg-no-repeat':''}`}
          >
            {item.label}
          </div>
        })
      }
     
    </div>
  }, [selectVal])

  return {
    SelectNode
  }
}


export default useGetData